<template>
  <div class="bodybg">
    <div style="margin-top: 40px;">
      <el-row>
        <el-col :span="4"></el-col>
        <el-col :span="8">
          <el-card class="box-card" style="text-align: center; background-color: #ecd5dc; height: 500px">
            <div style="margin-top: 100px;">
              <font style="font-size: 30px; color: white">注册</font>
            </div>
            <el-form :model="appObject.form" label-width="120px" style="margin-top: 20px;" ref="formRef" :rules="rules">
              <el-form-item label="用户名" prop="name">
                <el-input v-model="appObject.form.name" style="opacity: 0.5" />
              </el-form-item>
              <el-form-item label="密码" prop="password">
                <el-input v-model="appObject.form.password" style="opacity: 0.5" type="password" />
              </el-form-item>
              <el-form-item label="确认密码" prop="re_password">
                <el-input v-model="appObject.form.re_password" style="opacity: 0.5" type="password" />
              </el-form-item>
              <el-form-item label="职位" prop="position">
                <el-select v-model="appObject.form.job_id" class="m-2" style="opacity: 0.5" placeholder="选择职位">
                  <el-option :label="item.name" :value="item.id" :key="item.id" v-for="(item, index) in appObject.jobs" />
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-button style="width: 100%" type="primary" @click="submitForm(formRef)">注册</el-button>
              </el-form-item>
              <el-form-item>
                <el-link :underline="false" type="primary" @click="routeDispatch('/login')">
                  已有账号，点击登录
                </el-link>
              </el-form-item>
            </el-form>
          </el-card>
        </el-col>
        <el-col :span="8">
          <el-card class="box-card" style="text-align: center; background-color: #c9e0ed; height: 500px">
            <div style="margin-top: 100px;">
              <font style="font-size: 30px; color: white">WELCOME</font>
            </div>
            <div style="margin-top: 20px;">
              <font style="font-size: 20px; color: white">JOIN US</font>
            </div>
            <div style="margin-top: 20px;">
              <el-avatar :size="150" :src="appObject.imgSrc" />
            </div>
          </el-card>
        </el-col>
        <el-col :span="4"></el-col>
      </el-row>
    </div>
  </div>
</template>

<script setup>
  import { ref, reactive } from 'vue'
  import { ElMessage } from 'element-plus'
  import imgUrl from '../assets/img/wuwu.jpeg'
  import {routeDispatch} from '../http/utils.js'
  import { registerUser, getJobs } from '../http/userApi.js'
  
  const appObject = reactive({
    form: {
      name: '',
      password: '',
      re_password: '',
      job_id: ''
    },
    imgSrc: imgUrl,
    jobs: []
  })
  
  // 表单校验
  const validateTowPass = (rule, value, callback) => {
    if (value !== appObject.form.password) {
      callback(new Error("两次输入密码不一致"))
    } else {
      callback()
    }
  }
  const rules = reactive({
    name: [
      { required: true, message: '请输入用户名', trigger: 'blur' },
    ],
    password: [
      { required: true, message: '请输入密码', trigger: 'blur' },
    ],
    re_password: [
      { required: true, message: '请再次输入密码', trigger: 'blur' },
      { validator: validateTowPass, trigger: 'blur' }
    ]
  })
  
  // 提交注册
  const formRef = ref()
  const submitForm = (formEL) => {
    if (!formEL) return
    formEL.validate((valid) => {
      if (valid) {
        console.log("注册成功")
        registerUser(appObject.form).then(res => {
          console.log("注册", JSON.stringify(res))
          res = res.data
          if(res.code == 200) {
            ElMessage.success("注册成功")
            // 跳转到登录页面
            routeDispatch("/login")
          }else {
            ElMessage.error(res.msg)
          }
        })
      }else{
        return false
      }
    })
  }
  
  getJobs().then(res => {
    res = res.data
    appObject.jobs = res.data
  })
</script>

<style scoped>

</style>
